<template>
	<div class="inceter_right" >
		<aMian></aMian>
		<div class="inceter_right_cent">
			<div style="text-align: center;margin: 20px 0;border-bottom: 1px solid #cfcfcf;">
				<div class="hs" :style="$store.state.print.devic<750?'fontSize:8px;':'fontSize:16px;'">{{rows.title}}</div>
				<div :style="$store.state.print.devic<750?'fontSize:5px;margin: 5px 0':'fontSize:12px;margin: 20px 0'" style="margin: 20px 0;">
          来源：{{rows.author}} 日期：{{rows.createTime}} 浏览次数：{{rows.views}}  字号：[
          <span class="font" v-for="(item,index) in test" @click="changeSize(item.size)" >{{item.text}}</span>
        ]</div>
			</div>
			<div class="inceter_right_cent_nei" :style="$store.state.print.devic<750 ? 'padding:0 5px':'padding:0 25px'">
				<div class="introduction "  v-html="rows.content"></div>
			</div>
			<div style="padding-left: 15px;margin-top: 15px;font-size: 14px;" v-if="rows.upper">
				上一篇： <span @click="RowsClick(rows.upper.id)">{{rows.upper.title}}</span>
			</div>
			<div style="padding-left: 15px;font-size: 14px;" class="martop10" v-if="rows.lower">
				下一篇： <span @click="RowsClick(rows.lower.id)">{{rows.lower.title}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				rows:{
          // content:'<p><img src="http://134.175.4.241/cms-admin-api/profile/upload/ueditor/20200102/20200102005433_107221.jpg" title="20200102005433_107221.jpg" alt="107221.jpg"/></p>'
        },
				fontS:localStorage.getItem('fontS'),
				API:'',
        test:[{size:0.045,text:'大'},{size:0.035,text:'中'},{size:0.025,text:'小'}],
        content:'',
        cux:null,
			}
		},
		created() {
			this.API =  process.env.KERNEL
      this.info()
		},

		methods: {
      /*切换字体大小*/
      changeSize(size){
        this.rows.content = this.content.replace(/(\d+)px/g, function(s, t) {
          s = s.replace('px', '');
          var value = parseInt(s) * size; // 100px = 1rem
          return value + "rem";
        });
      },

      pc(val) {
        if (val == 0) return 'pc1'
        if (val == 1) return 'pc2'
        if (val == 2) return 'pc3'
      },
      RouterClick(url) {
        this.$router.push(url)
      },
      //上下篇
      RowsClick(row) {
        this.rows = []
        var data = {
          id: row,
          tagId: this.$route.query.tagId
        }
        this.$api.articleGetlist(data).then(res => {
          // console.log('-',res)
          if (res.code == 200) {
            this.rows = res.data
          }
        })
      },
      info() {
        this.getCampusList()
      },
      getCampusList() {
        var data = {
          id: this.$route.query.id,
          tagId: this.$route.query.tagId
        }
        this.$api.articleGetlist(data).then(res => {
          if (res.code == 200) {
            this.content=res.data.content;
            res.data.content = res.data.content.replace(/(\d+)px/g, function (s, t) {
              s = s.replace('px', '');
              var value = parseInt(s) * 0.01; // 100px = 1rem
              return value + "rem";
            });
            this.rows = res.data
          }
        })
      },
    }
	}
</script>

<style scoped>

.introduction >>> img {
  max-width: 100%;
}
.introduction >>> video {
  max-width: 100%;
}
  .pc1 >>> strong{
    font-size: 20px !important;
  }
  .pc1 >>> p{
    font-size: 20px !important;
    color: #009688;
    /* line-height:60px !important; */
  }
  .pc1 >>> span {
    color: #ff007f;
    font-size: 20px !important;
  }
  .pc2>>> strong{
    font-size: 16px !important;
  }
  .pc2>>>p{
    font-size: 16px !important;
    line-height:30px !important;
  }
  .pc2 >>> span {
    font-size: 16px !important;
  }
  .pc3>>> strong{
    font-size: 14px !important;
  }
  .pc3>>>p{
    font-size: 14px !important;
    line-height:30px !important;
  }
  .pc3 >>> span {
    font-size: 14px !important;
  }
  .hs{
    font-weight: bold;
  }
	span:hover{
		text-decoration: underline;
		cursor: pointer;
	}
	span{
		color: #666666;
	}
	.inceter_right_cent_nei{
		/* text-indent: 2em;
		line-height: 28px;
		padding-bottom: 25px; */
    padding: 0 25px;
	}
  .font{
    margin-right: 10px;
    color: #333333;
  }
  .font:last-child{
    margin-right: 0;
  }
</style>
